<template>
  <div class="main">
    <div class="tool-box">
      <div class="logo-box">
        <h3>TPSHION</h3>
      </div>
      <div class="btn-box">
        <div class="opt-box">
          <el-button type="success" @click="addSecretHandle('git')">创建Git密钥</el-button>
          <el-button type="primary" @click="addSecretHandle('ssh')">创建SSH密钥</el-button>
          <el-button type="warning" @click="backHome">退出</el-button>
        </div>
      </div>
    </div>
    <div class="flow-box">
      <div v-if="list.length > 0" class="card-wrap">
        <el-card class="box-card" shadow="hover" body-style="padding: 0 10px;" v-for="(item, index) in list" :key="index">
          <div class="title-box">
            <h4>{{ item.name }}</h4>
          </div>
          <el-divider style="margin-top: 1px; margin-bottom: 5px; border-color: #409EFF;"/>
          <div class="branch-box">
            <el-link style="color: #409EFF;" :icon="Link">{{ item.type }}密钥</el-link>
          </div>
          <div class="btn-box">
            <el-button size="small" type="danger" :icon="Delete" circle @click="deleteItem(item.name)"/>
          </div>
        </el-card>
      </div>
      <el-empty v-else description="没有密钥" />
    </div>

    <el-drawer v-model="drawerData.git" :direction="direction" size="35%" :with-header="false">
      <template #default>
        <el-form :model="nodeData.git" label-position="top">
          <el-form-item label="密钥类型:" required>
            <el-input v-model="nodeData.git.type" readonly/>
          </el-form-item>
          <el-form-item label="密钥名称:" required>
            <el-input v-model="nodeData.git.name" maxlength="8" show-word-limit/>
          </el-form-item>
          <el-form-item label="git帐号:" required>
            <el-input v-model="nodeData.git.data.username" clearable/>
          </el-form-item>
          <el-form-item label="git密码:" required>
            <el-input v-model="nodeData.git.data.password" type="password" show-password clearable/>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelClick('git')">取消</el-button>
          <el-button type="primary" @click="confirmClick('git')">确定</el-button>
        </div>
      </template>
    </el-drawer>

    <el-drawer v-model="drawerData.ssh" :direction="direction" size="35%" :with-header="false">
      <template #default>
        <el-form :model="nodeData.ssh" label-position="top">
          <el-form-item label="密钥类型:" required>
            <el-input v-model="nodeData.ssh.type" readonly/>
          </el-form-item>
          <el-form-item label="密钥名称:" required>
            <el-input v-model="nodeData.ssh.name" maxlength="8" show-word-limit/>
          </el-form-item>
          <el-form-item label="主机IP:" required>
            <el-input v-model="nodeData.ssh.data.host" clearable/>
          </el-form-item>
          <el-form-item label="主机用户:" required>
            <el-input v-model="nodeData.ssh.data.username" clearable/>
          </el-form-item>
          <el-form-item label="主机密码:" required>
            <el-input v-model="nodeData.ssh.data.password" type="password" show-password clearable/>
          </el-form-item>
          <el-form-item label="主机端口:" required>
            <el-input v-model="nodeData.ssh.data.port" type="number" clearable/>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelClick('ssh')">取消</el-button>
          <el-button type="primary" @click="confirmClick('ssh')">确定</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { SecretData } from '../model/SecretModel'
import { Link, Delete } from '@element-plus/icons-vue'
import { secretList, addSecret, deleteSecret } from '../api/SecretApi'
import { ElMessageBox } from 'element-plus'

const router = useRouter()
const list = ref<SecretData[]>([])
const direction = ref('rtl')
const drawerData = ref({
  git: false,
  ssh: false
})

const nodeData = ref({
  git: {
    type: 'git',
    name: '',
    data: {
      username: '',
      password: '',
    }
  },
  ssh: {
    type: 'ssh',
    name: '',
    data: {
      host: '',
      username: 'root',
      password: '',
      port: 22,
    }
  }
})

onMounted(() => {
  init()
})

const init = async () => {
  const rs = await secretList()
  if(rs.data){
    list.value = rs.data
  }else{
    list.value = []
  }
}

const backHome = () => {
  router.push({path: '/'})
}

const addSecretHandle = (type:string) => {
  if(type == 'git'){
    drawerData.value.git = true
  }
  if(type == 'ssh'){
    drawerData.value.ssh = true
  }
}

const deleteItem = (name:string) => {
  ElMessageBox.confirm('删除密钥：' + name + '?',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    await deleteSecret(name)
    await init()
  }).catch(() => {})
}

const confirmClick = async (type:string) => {
  if(type == 'git'){
    await addSecret(nodeData.value.git)
    drawerData.value.git = false
    await init()
  }
  if(type == 'ssh'){
    await addSecret(nodeData.value.ssh)
    drawerData.value.ssh = false
    await init()
  }
}

const cancelClick = (type:string) => {
  if(type == 'git'){
    drawerData.value.git = false
  }
  if(type == 'ssh'){
    drawerData.value.ssh = false
  }
}

</script>

<style lang="less" scoped>
.main{
  width: 100vw;
  height: 100vh;

  .tool-box{
    height: 60px;
    background-color: #7a7fd3;
    display: flex;
    align-items: center;
    justify-content: end;

    .logo-box{
      width: 100px;
      height: 60px;
      color: #ffffff;
      position: absolute;
      left: 15px;
    }

    .btn-box{
      height: 60px;
      padding-left: 10px;
      padding-right: 10px;
      display: flex;
      align-items: center;

      .title-box{
        width: 250px;
        height: 60px;
        color: #ffffff;
        display: flex;
        align-items: center;
      }

      .opt-box{
        height: 60px;
        display: flex;
        align-items: center;
      }
    }
  }

  .flow-box{
    height: calc(100vh - 60px);

    .card-wrap{
      display: flex;
      flex-wrap: wrap;
      padding: 10px;

      .box-card{
        width: 200px;
        height: 98px;
        border-color: #409EFF;
        margin: 30px;

        .title-box{
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .branch-box{
          height: 20px;
          display: flex;
          justify-content: start;
          align-items: center;
          padding-bottom: 8px;
        }

        .btn-box{
          display: flex;
          justify-content: end;
        }
      }
    }
  }
}
</style>